/**
 * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
 * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
 *
 * Use of this source code is governed by an MIT-style license.
 *
 * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
 * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
 * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
 *
 */
.sfc-container {
  width: 100%;
  height: 100%;
  position: absolute;

  * {
    box-sizing: border-box;
    // transition: all 0.2s;
  }

  .sfc-branch {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    // box-shadow: 0 0 20px -10px rgba(32,112,243,.5);
    // border: 1px solid rgba(25,65,132,.5);
    width: 560px;
    height: 560px;

    .sfc-core {
      width: 100%;
      height: 100%;
      position: relative;
      z-index: 2;
      // 背景图
      background: url('');
      background-size: 100% 100%;

      &.noLeafChild {
        background: unset;
      }
    }
  }

  &.disabled {
    .sfc-branch {
      // box-shadow: 0 0 20px -10px rgba(32, 112, 243, 0.3);
      border: 1px solid rgba(25, 65, 132, 0.3);
    }
  }

  &.overAll {
    .sfc-branch {
      width: 250px;
      height: 250px;

      .sfc-core {
        // 背景图
        background: url('');
        background-size: 100% 100%;

        &.noLeafChild {
          background: unset;
        }
      }
    }
  }
}

.sfc-node-container {
  height: 100%;
  position: relative;
  z-index: 4;
  border-radius: 50%;
}

.sfc-node-center {
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
  top: 50%;
}

.sfc-node-item,
.sfc-line-item,
.sfc-tag-item {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.sfc-node-item {
  left: 100%;
}

.sfc-line-item {
  z-index: 1;
  pointer-events: none;
}

.sfc-tag-item {
  >div {
    background: #37325a;
    border: 2px solid rgba(182, 43, 247, 0.6);
    border-radius: 50%;
    color: #ffffff;
    font-size: 12px;
  }
}

// 全网视口下的-叶子node
.sfc-container.overAll .sfc-node-item>div {
  // border-radius: 50%;
  // background: #000000;
  // background-image: linear-gradient(130deg, rgba(32, 112, 243, 0.2) 1%, rgba(32, 112, 243, 0) 100%);
  // box-shadow: 0 0 50px 0 #16181c, inset 0 0 11px 0 rgba(255, 255, 255, 0.12), inset 0 0 13px 0 rgba(32, 112, 243, 0.3);
  // color: #ffffff;
  // font-size: 12px;
  // position: relative;
  // border: 4px solid #18335e;
  // 背景图
  backdrop-filter: blur(0.25rem);
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

// 全网视口下的-错误态叶子node
.sfc-container.overAll .sfc-node-item.sfc-node-error>div {
  // background: #000000;
  // background-image: linear-gradient(130deg, rgba(231, 67, 74, 0.2) 1%, rgba(244, 49, 70, 0) 100%);
  // box-shadow: 0 0 80px 0 #582228, inset 0 0 11px 0 rgba(255, 255, 255, 0.5), inset 0 0 28px 0 rgba(224, 67, 73, 1);
  // border: 4px solid #e7434a;
  // 背景图
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

// 全网视口下的-黄色错误态叶子node
.sfc-container.overAll .sfc-node-item.sfc-node-warning>div {
  // background: #000000;
  // background-image: linear-gradient(130deg, rgba(252, 215, 46, 0.2) 1%, rgba(252, 215, 46, 0) 100%);
  // box-shadow: 0 0 80px 0 #16181c, inset 0 0 11px 0 rgba(255, 255, 255, 0.12), inset 0 0 13px 0 rgba(252, 215, 46, 1);
  // border: 4px solid #a58d1e;
  // 背景图
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

// 正常状态-叶子node
.sfc-container .sfc-node-item>div {
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  position: relative;
  background: unset;
  background-image: unset;
  box-shadow: unset;
  border: unset;
}

// 规避nce/charts的样式污染
.sfc-container .sfc-node-item.sfc-node-error>div {
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  position: relative;
  background: unset;
  background-image: unset;
  box-shadow: unset;
  border: unset;
}

// 正常状态-中心node
.sfc-container .sfc-node-center>div {
  border-radius: 50%;
  // 背景图
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

// 错误态-中心node
.sfc-container .sfc-node-center.sfc-node-error>div {
  // background-image: linear-gradient(130deg, rgba(231, 67, 74, 0.2) 1%, rgba(244, 49, 70, 0) 100%);
  // box-shadow: 0 0 80px 0 #582228, inset 0 0 11px 0 rgba(255, 255, 255, 0.5), inset 0 0 28px 0 #e51d0e;
  // border: 4px solid #e7434a;
  // 背景图
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

// 黄色错误态-中心node
.sfc-container .sfc-node-center.sfc-node-warning>div {
  // background-image: linear-gradient(130deg, rgba(252, 215, 46, 0.2) 1%, rgba(252, 215, 46, 0) 100%);
  // box-shadow: 0 0 50px 0 #161510, inset 0 0 11px 0 rgba(252, 215, 46, 0.12), inset 0 0 13px 0 rgba(252, 215, 46, 0.3);
  // border: 4px solid #a58d1e;
  // 背景图
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

// 错误点击态-中心node
// 错误点击态-叶子node
.sfc-container .sfc-node-center.sfc-node-error.nodeActive>div // ,.sfc-container .sfc-node-item.sfc-node-error.nodeActive > div

  {
  // background: #722b2e;
  // background-image: linear-gradient(130deg, rgba(231, 67, 74, 0.2) 1%, rgba(244, 49, 70, 0) 100%);
  // border: 4px solid #e7434a;
  // box-shadow: 0 0 80px 0 #c33037, inset 0 0 11px 0 rgba(255, 255, 255, 0.5), inset 0 0 28px 0 #e04349;
  // 背景图
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

// 黄色错误点击态-中心node
// 黄色错误点击态-叶子node
.sfc-container .sfc-node-center.sfc-node-warning.nodeActive>div // ,.sfc-container .sfc-node-item.sfc-node-warning.nodeActive > div

  {
  background: #614500;
  background-image: linear-gradient(130deg, rgba(252, 215, 46, 0.2) 1%, rgba(252, 215, 46, 0) 100%);
  box-shadow: 0 0 80px 0 rgba(252, 215, 46, 0.5), inset 0 0 13px 0 #fcd72e;
  border: 4px solid #fcd72e;
}

// 正常点击态-中心node
// 正常点击态-叶子node
.sfc-container .sfc-node-center.nodeActive>div // ,.sfc-container .sfc-node-item.nodeActive > div 

  {
  // background: #153f83;
  // background-image: linear-gradient(130deg, rgba(32, 112, 243, 0.2) 1%, rgba(89, 144, 253, 0) 100%);
  // border: 4px solid #2070f3;
  // box-shadow: 0 0 80px 0 #0061ff, inset 0 0 11px 0 rgba(255, 255, 255, 0.12), inset 0 0 13px 0 #2070f3;
  // 背景图
  border: unset;
  box-shadow: unset;
  background: unset;
  background-image: url('');
  background-size: 100% 100%;
}

/* 白色主题*/

.sfc-container.snowLight {
  .sfc-tag-item {
    >div {
      background: #ffffff;
      border: 2px solid rgba(182, 43, 247, 0.6);
      color: #191919;
    }
  }
}

// 正常状态-中心node
// 全网视口下的-叶子node
.sfc-container.snowLight .sfc-node-center>div,
.sfc-container.overAll.snowLight .sfc-node-item>div {
  background: #f5f5f5;
  // background-image: linear-gradient(130deg, rgba(32, 112, 243, 0.2) 1%, rgba(32, 112, 243, 0) 100%);
  // box-shadow: 0 0 50px 0 #16181c, inset 0 0 11px 0 rgba(255, 255, 255, 0.12), inset 0 0 13px 0 rgba(32, 112, 243, 0.3);
  background-image: unset;
  box-shadow: unset;
  color: #191919;
  border: 4px solid #18335e;
}

// 全网视口下的-错误态叶子node
.sfc-container.overAll.snowLight .sfc-node-item.sfc-node-error>div {
  background: #f5f5f5;
  // background-image: linear-gradient(130deg, rgba(231, 67, 74, 0.2) 1%, rgba(244, 49, 70, 0) 100%);
  // box-shadow: 0 0 80px 0 #582228, inset 0 0 11px 0 rgba(255, 255, 255, 0.5), inset 0 0 28px 0 rgba(224, 67, 73, 1);
  background-image: unset;
  box-shadow: unset;
  border: 4px solid #e7434a;
}

// 全网视口下的-黄色错误态叶子node
.sfc-container.overAll.snowLight .sfc-node-item.sfc-node-warning>div {
  background: #f5f5f5;
  // background-image: linear-gradient(130deg, rgba(252, 215, 46, 0.2) 1%, rgba(252, 215, 46, 0) 100%);
  // box-shadow: 0 0 80px 0 #16181c, inset 0 0 11px 0 rgba(255, 255, 255, 0.12), inset 0 0 13px 0 rgba(252, 215, 46, 1);
  background-image: unset;
  box-shadow: unset;
  border: 4px solid #a58d1e;
}

// 正常状态-叶子node
.sfc-container.snowLight .sfc-node-item>div {
  color: #191919;
}

// 规避nce/charts的样式污染
.sfc-container.snowLight .sfc-node-item.sfc-node-error>div {
  color: #191919;
}

// 错误态-中心node
.sfc-container.snowLight .sfc-node-center.sfc-node-error>div {
  // background-image: linear-gradient(130deg, rgba(231, 67, 74, 0.2) 1%, rgba(244, 49, 70, 0) 100%);
  // box-shadow: 0 0 80px 0 #582228, inset 0 0 11px 0 rgba(255, 255, 255, 0.5), inset 0 0 28px 0 #e51d0e;
  background-image: unset;
  box-shadow: unset;
  border: 4px solid #e7434a;
}

// 黄色错误态-中心node
.sfc-container.snowLight .sfc-node-center.sfc-node-warning>div {
  // background-image: linear-gradient(130deg, rgba(252, 215, 46, 0.2) 1%, rgba(252, 215, 46, 0) 100%);
  // box-shadow: 0 0 50px 0 #161510, inset 0 0 11px 0 rgba(252, 215, 46, 0.12), inset 0 0 13px 0 rgba(252, 215, 46, 0.3);
  background-image: unset;
  box-shadow: unset;
  border: 4px solid #a58d1e;
}

// 错误点击态-中心node
// 错误点击态-叶子node
.sfc-container.snowLight .sfc-node-center.sfc-node-error.nodeActive>div,
.sfc-container.snowLight .sfc-node-item.sfc-node-error.nodeActive>div {
  background: #722b2e;
  background-image: linear-gradient(130deg, rgba(231, 67, 74, 0.2) 1%, rgba(244, 49, 70, 0) 100%);
  border: 4px solid #e7434a;
  box-shadow: 0 0 80px 0 #c33037, inset 0 0 11px 0 rgba(255, 255, 255, 0.5), inset 0 0 28px 0 #e04349;
}

// 黄色错误点击态-中心node
// 黄色错误点击态-叶子node
.sfc-container.snowLight .sfc-node-center.sfc-node-warning.nodeActive>div,
.sfc-container.snowLight .sfc-node-item.sfc-node-warning.nodeActive>div {
  background: #614500;
  background-image: linear-gradient(130deg, rgba(252, 215, 46, 0.2) 1%, rgba(252, 215, 46, 0) 100%);
  box-shadow: 0 0 80px 0 rgba(252, 215, 46, 0.5), inset 0 0 13px 0 #fcd72e;
  border: 4px solid #fcd72e;
}

// 正常点击态-中心node
// 正常点击态-叶子node
.sfc-container.snowLight .sfc-node-center.nodeActive>div,
.sfc-container.snowLight .sfc-node-item.nodeActive>div {
  background: #153f83;
  background-image: linear-gradient(130deg, rgba(32, 112, 243, 0.2) 1%, rgba(89, 144, 253, 0) 100%);
  border: 4px solid #2070f3;
  box-shadow: 0 0 80px 0 #0061ff, inset 0 0 11px 0 rgba(255, 255, 255, 0.12), inset 0 0 13px 0 #2070f3;
}

/**
以下为defaultOption中配置的样式
**/
.centerNode_defaultRender {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  line-height: 1;
  gap: 4px;
  font-size: 12px;
  position: relative;

  >img {
    &.rootImg {
      width: 48px;
      height: 48px;
    }

    &.apImg {
      width: 32px;
      height: 32px;
    }
  }

  .deviceName,
  .onlineDuration {
    word-break: break-all;
    width: 70%;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }

  .onlineDuration {
    white-space: nowrap;
  }

  .rootName {
    font-size: 16px;
  }

  .terminalNumTip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 1px solid #9f8285;
    padding: 4px 8px;
    width: max-content;
    backdrop-filter: blur(.125rem)
  }
}

.leafNode_defaultRender {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-size: 12px;
  line-height: 1;

  .imgBg {
    width: 64px;
    height: 64px;

    >div:not(:last-child) {
      margin-bottom: 4px;
    }
  }

  .deviceName {
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
  }

  .leafNodeShadow {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    filter: blur(20px);
  }
}

.sfc-overAllTip {
  position: fixed;
  display: none;
  background: #393939;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0px 8px 24px 0px #00000080;
  z-index: 9999;
  color: #f5f5f5;
  font-size: 14px;
  line-height: 1;
}

.sfcTipContainer {
  .rateInfo {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;

    >img {
      width: 0.75rem;
      height: 0.75rem;
    }
  }
}